<template>
  {{ d.num.toFixed(0) }}
</template>
<script setup>
import { reactive, watch } from "vue";
import gsap from "gsap";
const props = defineProps({
  value: {
    type: Number,
    default: 0,
  },
});
const d = reactive({
  num: 0,
});
// 动画
function AnmateToValue() {
  gsap.to(d, {
    duration: 2,
    num: props.value,
    onComplete: () => {
      // 动画完成后暂停 2 秒，然后重新开始动画
      gsap.delayedCall(2, () => {
        d.num = 0;
        AnmateToValue();
      });
    },
  });
}
AnmateToValue();
// 监听prop.value的值是否有变化，有变化就执行AnmateToValue()方法
watch(
  () => props.value,
  () => AnmateToValue()
);
</script>
